<template>
  <div class="messageModel">
    <div class="desc">
      <div class="title">{{props.info.name}}</div>
      <div class="text">{{props.info.content}}</div>
    </div>
    <div class="messageModel_icon">
      <el-image :src="formatUrl(props.info)" alt="" fit="cover">
        <template #error>
          <el-image :src="getDefaultUrl(props.info)" alt=""></el-image>
        </template>
      </el-image>
    </div>
    <div class="del_mater">
      <el-icon @click="del"><delete /></el-icon>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {reactive, ref, computed, watch, onMounted, defineProps} from "vue"
import {useRouter, useRoute} from "vue-router"
import MessageBox from './MessageBox.vue'
import {materialTabs, getHashTabs} from '@/utils/utils'

const props = defineProps(['info'])

const emit = defineEmits(['del'])

const del = () => {
  emit('del', 0)
}

const formatUrl = (info:any) => {
  switch(info.type){
    case '3':
      return info.linkUrl
    break;
    default:
      return info.icon
    break;
  }
}

const getDefaultUrl = (info:any) => {
  const maps = getHashTabs()
  return maps[info.type].icon
}

onMounted(()=>{
  
})

</script>

<style lang="scss" scoped>
  .messageModel{
    width: 300px;
    display: flex;
    align-items: center;
    background-color: #eee;
    padding: 6px;
    box-sizing: border-box;
    border-radius: 4px;
    .messageModel_icon{
      width: 48px;
      height: 48px;
      margin: 0 6px;
      .el-image{
        width: 100%;
        height: 100%;
        vertical-align: top;
      }
    }
    .desc{
      flex: 1;
      width: 0;
      .title{
        width: 100%;
        font-size: 12px;
        color: #555;
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .text{
        width: 100%;
        font-size: 12px;
        color: #666;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
    
    .del_mater{
      width: 40px;
      display: flex;
      align-content: center;
      justify-content: center;
      .el-icon{
        color: #888;
        font-size: 22px;
        line-height: 1;
        &:hover{
          cursor: pointer;
          color: #F96B02;
        }
      }
    }

  }
</style>
